<template>
  <main>
    <Hero :title="title"/>
    <section class="featured-job-area section-padding30 section-bg2" data-background="../assets/img/gallery/section_bg03.png">
      <div class="container">
        <div class="row justify-content-center">
          <div v-for="item in newList" :key="item" class="col-lg-9 col-md-12">
            <!-- single-job-content -->
            <div class="single-job-items mb-30">
              <div class="job-items">
                <div class="company-img">
                  <a><img src="../assets/img/new/new.png" alt=""></a>
                </div>
                <div class="job-tittle">
                  <a v-on:click="toArticle(item)"><h4>{{ item.title.substr(0,20) }}...</h4></a>
                  <ul>
                    <li><i class="far fa-clock"></i>{{ item.publishTime }}</li>
                    <li><i class="fas fa-sort-amount-down"></i>{{ item.author }}</li>
                    <li><i class="fas fa-map-marker-alt"> {{ item.source }}</i></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>
</template>

<script>
import Hero from "../components/hero"
import {getHighlight} from "@/api/blog";
export default {
  name: "news",
  components: {
    Hero
  },
  data() {
    return {
      title: "时事新闻",
      newList: []
    }
  },
  mounted() {
    this.getNews()
  },
  methods: {
    getNews() {
      getHighlight(
          {pageSize:10}
      ).then((res) =>{
        if (res != null) {
          this.newList = res
        } else {
          alert("未查询到相关新闻")
        }
      })
    },
    toArticle(data){
      this.$router.push({ name: 'article', params: data})
    }
  }
}

</script>

<style scoped>
a:hover{
  text-decoration-line: none;
  cursor:pointer
}
</style>
